<template>
    <n-spin :show="loading">
        <n-space vertical :size="12">
            <n-space justify="space-between">
                <n-space>
                    <n-button @click="doAdd">
                        <template #icon>
                            <n-icon :component="AddRound" />
                        </template>
                        添加
                    </n-button>
                    <!-- <n-button type="warning" :disabled="srows.length == 0" @click="doBatchDelete">
                        <template #icon>
                            <n-icon :component="DeleteForeverRound" />
                        </template>
                        删除
                    </n-button> -->
                </n-space>
                <n-space>
                    <n-form inline :model="param" :show-label="false" :show-feedback="false" ref="formRef">
                        <n-form-item>
                            <n-input v-model:value="param.query.name" style="width: 150px" clearable placeholder="商品名称" />
                        </n-form-item>
                        <n-form-item>
                            <n-select v-model:value="param.query.role" style="width: 150px" clearable :options="UserRoleOpts" @update:value="doQuery" placeholder="员工角色" />
                        </n-form-item>
                    </n-form>

                    <n-button @click="doQuery">
                        <template #icon>
                            <n-icon :component="YoutubeSearchedForRound" />
                        </template>
                        查询
                    </n-button>
                </n-space>
            </n-space>
            <n-data-table
                striped
                size="large"
                type="selection"
                :checked-row-keys="srows"
                :max-height="height"
                :min-height="items.length > 0 ? height : 0"
                :row-key="(row:any) => row.id"
                @update:checked-row-keys="onCheckRow"
                :columns="columns"
                :data="items"
            />
            <n-space justify="end">
                <n-pagination show-size-picker :page="param.pager.page" :page-size="param.pager.size" :page-count="pager.all" :page-sizes="[10, 25, 50, 100]" @update:page="onChangePage" @update:page-size="onChangeSize">
                    <template #prefix="{}">当前 {{ pager.now }} / {{ pager.all }} 页，共 {{ pager.row }} 条数据</template>
                </n-pagination>
            </n-space>
        </n-space>
        <Form :item="data" v-model:show="formActive" v-if="formActive" @refresh="execLoad"></Form>
        <Lobar :item="data" v-model:show="lobarActive" v-if="lobarActive" @refresh="execLoad"></Lobar>
        <View :item="data" v-model:show="viewActive" v-if="viewActive"></View>
        <Delete :items="datas" v-model:show="deleteActive" v-if="deleteActive" @refresh="execLoad"></Delete>
        <Reset :items="datas" v-model:show="resetActive" v-if="resetActive" @refresh="execLoad"></Reset>
        <Lock :items="datas" v-model:show="lockActive" v-if="lockActive" @refresh="execLoad"></Lock>
    </n-spin>
</template>

<script lang="ts" setup>
import { h, ref, computed, onActivated } from 'vue'
import { NSpace, NText, NIcon, NButton, NDropdown, NTooltip, NTag } from 'naive-ui'
import { AddRound, DeleteForeverRound, YoutubeSearchedForRound, InfoOutlined, EditNoteOutlined, ExpandMoreRound, PasswordRound, LockOpenOutlined, LockOutlined } from '@vicons/material'
import { FileAltRegular, Weixin } from '@vicons/fa'

import { renderIcon } from '@/util'
import { useStore } from '@/store'
import { Http, Filters } from '@/libs'
import { UserRoleOpts } from '@/libs/enum'

import View from './View.vue'
import Form from './Form.vue'
import Delete from './Delete.vue'
import Reset from './Reset.vue'
import Lock from './Lock.vue'
import Lobar from './Lobar.vue'

const { $notification: notification } = window
const { $dialog: dialog } = window

const store = useStore()

const loading = computed(() => store.state.loading.flag)

const height = computed(() => store.state.browser.innerHeight - 310)

const columns = [
    {
        type: 'selection',
        fixed: 'left',
        align: 'center',
    },
    {
        title: '商品名称',
        key: 'Name',
        align: 'left',
        width: 150,
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: '商品描述',
        key: 'Description',
        align: 'left',
        width: 200,
        ellipsis: {
            tooltip: true,
        },
        // render(row: any) {
        //     let comps: any[] = []
        //     comps[comps.length] = h(NText, {}, { default: () => row.name })
        //     comps[comps.length] = h(NText, { code: true }, { default: () => row.mob })
        //     return h(NSpace, { wrap: false }, { default: () => comps })
        // },
    },
    {
        title: '商品售价',
        key: 'Price',
        align: 'left',
        width: 100,
        ellipsis: {
            tooltip: true,
        },
        render(row: any) {
            // let comps: any[] = []
            // comps[comps.length] = h(NText, {}, { default: () => row.name })
            // comps[comps.length] = h(NText, { code: true }, { default: () => row.mob })
            // return h(NSpace, { wrap: false }, { default: () => comps })
            return h(NText, {}, { default: () => row.Price + ' 元' })
        },
    },
    {
        title: '库存',
        key: 'Stock',
        align: 'left',
        width: 100,
        ellipsis: {
            tooltip: true,
        },
    },
    {
        title: '操作',
        key: 'actions',
        width: 270,
        align: 'left',
        fixed: 'right',
        render(row: any) {
            return h(
                NSpace,
                { justify: 'start' },
                {
                    default: () => [
                        // h(
                        //     NButton,
                        //     {
                        //         size: 'small',
                        //         onClick: () => {
                        //             srows.value = []
                        //             data.value = row
                        //             viewActive.value = true
                        //         },
                        //     },
                        //     { default: () => '详情', icon: () => h(NIcon, {}, { default: () => h(InfoOutlined, {}, {}) }) }
                        // ),
                        h(
                            NButton,
                            {
                                size: 'small',
                                onClick: () => {
                                    srows.value = []
                                    data.value = row
                                    formActive.value = true
                                },
                            },
                            { default: () => '编辑', icon: () => h(NIcon, {}, { default: () => h(EditNoteOutlined, {}, {}) }) }
                        ),
                        h(
                            NButton,
                            {
                                size: 'small',
                                onClick: () => {
                                    doDelete(row)
                                },
                            },
                            { default: () => '删除', icon: () => h(NIcon, {}, { default: () => h(DeleteForeverRound, {}, {}) }) }
                        ),
                    ],
                }
            )
        },
    },
]

const doDelete = (row: any) => {
    dialog.error({
        title: `提示?`,
        content: `是否删除[${row.Name}]?`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            execDelete(row.ID)
        },
    })
}

const execDelete = (id: string) => {
    Http.post('/ops/biz/gps/goods/delete', {
        ids: [String(id)],
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        execLoad()
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: '您已成功删除商品信息',
        })
    })
}

const srows = ref<string[]>([])

const onCheckRow = (keys: string[]) => {
    srows.value = keys
}

const onChangeSize = (size: number) => {
    param.value.pager.page = 1
    param.value.pager.size = size
    execLoad()
}

const onChangePage = (page: number) => {
    param.value.pager.page = page
    execLoad()
}

const param = ref({
    query: {
        name: '',
        role: undefined,
    },
    pager: {
        page: 1,
        size: 10,
        time: new Date().getTime(),
    },
})

const pager = ref({
    now: 1,
    row: 0,
    all: 0,
    fms: 0,
})
const items = ref([])

const doQuery = () => {
    param.value.pager.page = 1
    execLoad()
}

const execLoad = () => {
    Http.post('/ops/biz/gps/goods/list', param.value).then(resp => {
        console.log('resp', resp)
        if (resp.stat.err > 0) {
            return
        }
        if (resp.data.pager.now == 1) {
            param.value.pager.time = resp.data.pager.fms
        }
        srows.value = []
        pager.value = resp.data.pager
        items.value = resp.data.items
    })
}

const getActionOps = (row: any) => {
    let ops: any = []
    // ops[ops.length] = { label: '更新合同', key: 'lobar', icon: renderIcon(FileAltRegular) }
    // ops[ops.length] = { type: 'divider', key: 'd1' }
    // ops[ops.length] = { label: '删除', key: 'delete', icon: renderIcon(DeleteForeverRound) }
    // ops[ops.length] = { type: 'divider', key: 'd2' }
    // ops[ops.length] = { label: '重置绑定', key: 'reset', icon: renderIcon(PasswordRound) }
    // ops[ops.length] = { type: 'divider', key: 'd3' }
    // if (row.lock.flag) {
    //     ops[ops.length] = { label: '解除锁定', key: 'unlock', icon: renderIcon(LockOpenOutlined) }
    // } else {
    //     ops[ops.length] = { label: '锁定登录', key: 'lock', icon: renderIcon(LockOutlined) }
    // }
    return ops
}

const onActionSelect = (key: string) => {
    switch (key) {
        case 'lobar':
            lobarActive.value = true
            break
        case 'delete':
            datas.value = [data.value]
            deleteActive.value = true
            break
        case 'reset':
            datas.value = [data.value]
            resetActive.value = true
            break
        case 'lock':
            datas.value = [data.value]
            lockActive.value = true
            break
        case 'unlock':
            doUnlock(data.value)
            break
    }
}

const data = ref<any>({})

const datas = ref<any[]>([])

const doAdd = () => {
    data.value = undefined
    formActive.value = true
}

const doBatchDelete = () => {
    datas.value = items.value.filter((v: any) => srows.value.includes(v.id))
    deleteActive.value = true
}

const formActive = ref(false)
const viewActive = ref(false)
const deleteActive = ref(false)
const resetActive = ref(false)
const lockActive = ref(false)
const lobarActive = ref(false)

const doUnlock = (row: any) => {
    dialog.success({
        title: `提示?`,
        content: `是否解除[${row.name}]的登录锁定状态?`,
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: () => {
            execUnlock(row.id)
        },
    })
}

const execUnlock = (id: string) => {
    Http.post('/ops/account/key/unlock', {
        ids: [id],
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        execLoad()
        notification.success({
            duration: 1500,
            title: '操作成功',
            content: '您已成功解除员工登录锁定',
        })
    })
}

onActivated(() => {
    execLoad()
})
</script>
